<template>
  <LayOut :bread="[{
    title: '课程管理',
  }]">
    <template #functionalDomain>
      <el-space>
        <el-link type="primary" @click="goToNext">新增课程</el-link>
      </el-space>
    </template>
    <el-table :data="courseList" style="width: 100%">
      <el-table-column prop="id" label="id" width="200" />
      <el-table-column prop="adminName" label="用户名" width="200" />
      <el-table-column prop="title" label="标题" width="200" />
      <el-table-column prop="classify" label="分类" width="120" :formatter="formatter" />
      <el-table-column prop="desc" label="介绍" width="600" />
      <el-table-column prop="views" label="观看次数" width="120" />
      <el-table-column prop="url" label="url" width="200" />
      <el-table-column prop="create_time" label="创建时间" width="200" :formatter="formatterTime" />
      <el-table-column prop="modify_time" label="修改时间" width="200" :formatter="formatterTime" />
      <el-table-column fixed="right" label="操作" min-width="120" align="center">
        <template #default="scope">
          <el-button type="primary"  @click="goToEdit(scope.row)">修改</el-button>
          <el-button type="danger" @click="deleteCourseHandle(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </LayOut>
</template>
  
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import LayOut from '@/components/LayOut.vue'
import { useRouter } from 'vue-router';
import service from '@/service';
import { to, formatTime } from '@/plugin';
import type { ICourseItemDataModal } from '@/type';
import { useCourseClassifyStore } from '@/stores/courseClassify';
import { ElMessage, ElMessageBox } from 'element-plus'

const courseClassifyStore = useCourseClassifyStore();
const { courseClassifys } = courseClassifyStore;
const { queryCourses, deleteCourse } = service;
const router = useRouter();

const courseList = ref<ICourseItemDataModal[]>([]);

const formatter = (row: any, column: any, cellValue: any, index: number) => {
  return getcourseClassifyLabel(cellValue);
}

const formatterTime = (row: any, column: any, cellValue: any, index: number) => {
  return formatTime(cellValue);
}

const getcourseClassifyLabel = (id: number) => {
  const courseClassify = courseClassifys.find(item => item.id === id);
  return courseClassify ? courseClassify.label : courseClassify;
}

const queryCoursesHandle = async () => {
  const [res, err] = await to(queryCourses());
  const result = res.data;
  if (!err && result.code === 1) {
    // getTagsHandle();
    courseList.value = result.data;
  } else {
    console.error(err);
  }
}

const deleteCourseHandle = (scope: ICourseItemDataModal) => {
  ElMessageBox.confirm(
    '请确认是否删除',
    '删除',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'error',
    }
  )
    .then(async () => {
      const [res, err] = await to(deleteCourse({ id: scope.id }));
      const result = res.data;
      if (!err && result.code === 1) {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        queryCoursesHandle();
      } else {
        console.error(err);
      }

    })
    .catch(() => {
    })
}

const goToNext = () => {
  router.push('/course/add');
}

const goToEdit = (scope: ICourseItemDataModal) => {
  router.push({
    path: '/course/edit',
    query: {
      id: scope.id
    }
  });
}

onMounted(() => {
  queryCoursesHandle();
})
</script>
<style lang="less" scoped>
.translate-container {
  width: 60%;
  max-width: 800px;
  margin: auto;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: white;
}

.translate-container h1 {
  text-align: center;
  font-size: 2em;
  margin-bottom: 20px;
}

.translate-container .el-select {
  width: 48%;
  display: inline-block;
}

.translate-container span {
  margin: 0 1%;
  vertical-align: middle;
}
</style>